<template>
  <div class="app-container">
    <div>
      <p>1、使用字典值</p>
      <WSelect v-model="value1" dict-key="fruits" />
    </div>
    <div>
      <p>2、使用传入的选项</p>
      <WSelect v-model="value2" :options="myOptions" />
    </div>
    <div>
      <p>3、使用插槽，增加全部选项</p>
      <WSelect v-model="value3" dict-key="fruits" @change="onChange">
        <el-option label="全部" :value="undefined" />
      </WSelect>
    </div>
  </div>
</template>

<script>
import WSelect from '@/components/WComponents/WSelect/index.vue'

export default {
  name: 'test',
  components: { WSelect },
  data() {
    return {
      value1: '',
      value2: '',
      myOptions: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      value3: ''
    }
  },
  methods: {
    onChange(val) {
      console.log('onChange', val)
    }
  }
}
</script>

<style scoped lang="scss"></style>
